<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加分类</span>
        <el-button type="primary" @click="addDialog = true">添加分类</el-button>
      </div>
      <!-- 内容区放表格 -->
      <!-- border：加边框 -->
      <!-- stripe：表格各行换色 -->
      <el-table style="width: 100%" :data="list">
        <el-table-column prop="id" label="ID" border stripe width="150px"> </el-table-column>
        <el-table-column prop="cate_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"> </el-table-column>
        <el-table-column label="操作">
          <!-- slot-scope="scope"====v-slot="scope":这是一个作用域插槽的写法，scope代表记录了本行的信息 -->
          <template v-slot="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click.native.prevent="delCategory(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加的对话框 -->
    <!-- :before-close="cancel":关闭小按钮之前要做的事 -->
    <el-dialog :before-close="cancel" title="添加类别" :visible.sync="addDialog" width="500px">
      <el-form label-width="80px" :model="addData" :rules="rules" ref="addform">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input autocomplete="off" v-model="addData.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input autocomplete="off" v-model="addData.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addCategory()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑分类的弹层 -->
    <el-dialog :before-close="editcancel" title="修改类别" :visible.sync="editDialog" width="500px">
      <el-form label-width="80px" :model="editData" :rules="rules" ref="editForm">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input autocomplete="off" v-model="editData.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input autocomplete="off" v-model="editData.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editcancel">取 消</el-button>
        <el-button type="primary" @click="editConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getArtcateAPI, addArtcateAPI, delArtcateAPI, editArtcateAPI } from '@/api/art-cate'
export default {
  name: 'CateList',
  data() {
    return {
      // 先将数据留空，等ajax请求完成，先获取列表数据之后，给list赋值
      list: [],
      // 控制添加弹框的数据项,默认隐藏对话框，true表示显示对话框
      addDialog: false,

      // 收集添加表单的数据
      addData: {
        id: '',
        cate_name: '',
        cate_alias: ''
      },
      // 控制编辑弹框的数据项
      editDialog: false,
      // 收编辑表单的数据
      editData: {},
      // 对表单的验证
      rules: {
        cate_name: [
          { required: true, message: '分类名称必填', trigger: 'blur' },
          { min: 1, max: 10, message: '分类名称长度为1-10位', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '分类别名必填', trigger: 'blur' },
          // 正则里面有个坑：{1,15}只能这样写，不能写成{1， 15}
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: '只能是长度为1-15的数字字母格式',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 发送请求，获取文章列表
    async getCategory() {
      // 封装一个方法，发送请求，获取到服务器的数据，然后赋值给list
      const { data: res } = await getArtcateAPI()
      if (res.code === 0) {
        this.list = res.data
      }
    },
    // 添加分类
    addCategory() {
      this.$refs.addform.validate(async valide => {
        if (valide) {
          const { data: res } = await addArtcateAPI(this.addData)
          if (res.code === 0) {
            // 提示添加成功
            this.$message.success(res.message)
            // 重新获取分类列表数据
            this.getCategory()

            // 重置表单
            this.$refs.addform.resetFields()
            // 弹层框隐藏
            this.addDialog = !this.addDialog
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    // 取消添加的方法
    cancel() {
      // 重置表单
      this.$refs.addform.resetFields()
      // 关闭弹框
      this.addDialog = false
    },
    // 删除分类
    async delCategory(id) {
      // 获取到当前行的id，发送一个delete请求
      //  加一个判断框，弹出是否确认删除
      // 第一行和第二行的数据不能被删除
      if (id === 1 || id === 2) return this.$message.error('管理员不允许删除id=1和id=2的数据')
      this.$confirm('确定删除分类列表吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async r => {
          if (r === 'confirm') {
            // 这就代表用户点了确定删除按钮，就可以发送删除的请求了
            const { data: res } = await delArtcateAPI(id)
            if (res.code === 0) {
              this.$message.success(res.message)
              // 删除成功后还要调用获取分类的方法，更新数据
              this.getCategory()
            } else {
              this.$message.error(res.message)
            }
          }
        }
      })
      // .then( () => {
      //   // 确定删除进入这里
      //   const { data: res } = await delArtcateAPI(id)
      //   if (res.code === 0) {
      //     this.$message.success(res.message)
      //     this.getCategory()
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // })

      // .catch(() => {
      //   //  取消删除进入这里
      // })
    },
    // 显示编辑弹层
    edit(row) {
      // 点击编辑，弹层出现
      this.editDialog = true
      // 点击编辑，数据回填到表单
      this.editData = { ...row }
    },
    // 编辑的取消
    editcancel() {
      // 重置表单，不需要重置表单，因为反正都要回填的
      // this.$refs.editForm.resetFields()
      // 关闭弹框
      this.editDialog = false
    },
    // 确定修改，发送请求
    editConfirm() {
      this.$refs.editForm.validate(async valide => {
        if (!valide) return
        const { data: res } = await editArtcateAPI(this.editData)
        if (res.code === 0) {
          // 提示修改成功
          this.$message.success(res.message)
          // 关闭弹层
          this.editDialog = false
          // 调用获取列表的函数，更新数据
          this.getCategory()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
  // 利用生命周期函数自动执行的特点，只要打开页面，就自动调用getCategory方法，发送请求，获取数据，然后赋值给list
  // 然后数据驱动视图，数据一更新，页面就有数据了
  created() {
    this.getCategory()
  }
}
</script>

<style scoped lang="less">
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
